<template>
  <div style="padding: 20px">
    <el-alert
      title="通知：为提升附件题使用体验，问卷附件存储空间容量由原单份问卷500M升级为个人所有问卷共享2G，请知悉"
      type="warning"
      style="margin-bottom: 3%"
    >
    </el-alert>
    <div class="title">个人问卷</div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in formOptionsData" :key="index">
        <div
          @mouseenter="enter(index)"
          @mouseleave="leave(index)"
          style="margin-top: 10px"
        >
          <el-card
            :body-style="{
              padding: '0px',
              height: '300px',
              position: 'relative'
            }"
            shadow="hover"
          >
            <div class="recycing" v-if="item.play">正在回收</div>
            <!--              src="@/assets/img/chunse_beijing-011.jpg"-->
            <img
              src=""
              class="image"
              :style="item.bgURL"
              @click="showDrawer(item)"
            />
            <transition name="fade-in" v-if="!isHover[index]">
              <div style="padding: 15px; height: 40px">
                <span style="font-weight: 500; margin-bottom: 20px">
                  {{ item.name }}
                </span>
                <div class="form-title">
                  <span style="margin-right: 50px">回收 {{item.statis.recycle?item.statis.recycle:'0'}} 份</span>
                  <span>浏览 {{item.statis.look?item.statis.look:'0'}} 次</span>
                </div>
              </div>
            </transition>
            <transition name="fade-out" v-else>
              <div style="margin: 24px; height: 40px" class="form-button">
                <el-tooltip
                  :content="item.play ? '暂停回收' : '开始回收'"
                  placement="bottom"
                >
                  <i
                    class="el-icon-video-pause"
                    v-if="item.play"
                    @click="pauseRecycling(index, item)"
                  ></i>
                  <i
                    class="el-icon-video-play"
                    v-else
                    @click="startRecycling(index, item)"
                  ></i>
                </el-tooltip>
                <el-tooltip content="编辑" placement="bottom">
                  <i class="el-icon-edit" @click="editForm(item.fid)"></i>
                </el-tooltip>
                <el-tooltip content="统计" placement="bottom">
                  <i
                    class="el-icon-pie-chart"
                    @click="openDataAnalysis(item.fid)"
                  ></i
                ></el-tooltip>
              </div>
            </transition>
          </el-card>
        </div>
      </el-col>
      <!-- 关于问卷的抽屉 -->
      <el-drawer
        :with-header="false"
        :visible.sync="drawerVisible"
        :modal="false"
      >
        <div style="margin: 10px 10px 10px 20px" class="title">
          {{ currentForm.name }}
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="问卷详情">
            <div class="drawer">
              <div class="totalCharts-container">
                <div class="total-container" style="">
                  <div class="total-title">最近30天回收概况</div>
                  <span class="total-count">总回收量:0</span>
                </div>
                <div class="total-chart">
                  <vue-echarts :option="Options" />
                </div>
              </div>
              <div class="form-info">
                <div class="form-info-item">
                  <div class="item-key">开始时间</div>
                  <div class="item-value">{{ currentForm.startTime }}</div>
                </div>
                <div class="form-info-item">
                  <div class="item-key">结束时间</div>
                  <div class="item-value">{{ currentForm.endTime }}</div>
                </div>
                <div class="form-info-item">
                  <div class="item-key">修改时间</div>
                  <div class="item-value">2021-05-29</div>
                </div>
                <div class="form-info-item">
                  <div class="item-key">问卷状态</div>

                  <div
                    v-if="currentForm.play"
                    class="item-value"
                    style="display: flex; align-items: center"
                  >
                    <div
                      style="
                        width: 6px;
                        height: 6px;
                        vertical-align: 2px;
                        border-radius: 100%;
                        background-color: #3bb357;
                        margin-right: 6px;
                      "
                    ></div>
                    <div>正在回收</div>
                  </div>
                  <div v-else style="display: flex; align-items: center">
                    <div
                      style="
                        width: 6px;
                        height: 6px;
                        vertical-align: 2px;
                        border-radius: 100%;
                        background-color: red;
                        margin-right: 6px;
                      "
                    ></div>
                    <div>停止回收</div>
                  </div>
                </div>
              </div>
              <div class="devide"></div>
              <a
                class="link"
                :href="getLinkURL(currentForm.fid)"
                target="_blank"
                >{{ getLinkURL(currentForm.fid) }}</a
              >
              <div class="btn-container">
                <el-button
                  type="primary"
                  plain
                  @click="putFormJump(currentForm.fid)"
                  >投放问卷</el-button
                >
                <el-button
                  type="danger"
                  plain
                  @click="deleteFormHandle(currentForm.fid)"
                  >删除问卷</el-button
                >
              </div>
            </div></el-tab-pane
          >
          <el-tab-pane label="配置管理">
            <el-form
              ref="form"
              :model="formOptions"
              label-width="160px"
              size="medium "
              style="margin-left: 2%; margin-right: 4%; margin-top: 43px"
              :rules="rules"
            >
              <el-form-item label="表单主题">
                <el-select
                  v-model="formOptions.bgURL"
                  placeholder="请选择表单主题"
                >
                  <el-option
                    v-for="(item, index) in theme"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                <div class="block">
                  <el-date-picker
                    v-model="formOptions.startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="结束时间">
                <div class="block">
                  <el-date-picker
                    v-model="formOptions.endTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="是否只允许填写一次">
                <el-switch v-model="formOptions.fillOne"></el-switch>
              </el-form-item>
              <el-form-item label="填写完毕后的跳转" prop="goToURL">
                <el-input v-model="formOptions.goToURL"></el-input>
              </el-form-item>
              <el-form-item label="问卷名称">
                <el-input v-model="formOptions.name"></el-input>
              </el-form-item>
              <el-form-item label="是否处于发放状态">
                <el-switch v-model="formOptions.play"></el-switch>
              </el-form-item>
              <el-form-item label="问卷密码">
                <el-input v-model="formOptions.pswd"></el-input>
              </el-form-item>
              <el-form-item label="题目顺序是否随机">
                <el-switch v-model="formOptions.randomEcho"></el-switch>
              </el-form-item>
              <el-button
                type="primary"
                style="display: block; width: 100%"
                @click="updateAllFormOptions"
                >确认</el-button
              >
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
    </el-row>
    <el-dialog
      title="开始回收"
      :visible.sync="startRecyclingDialogVisible"
      width="30%"
    >
      <span>要开始回收问卷《{{ formOptions.name.trim() }}》吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="startRecyclingDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="startRecyclingForm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="暂停回收
"
      :visible.sync="pauseRecyclingDialogVisible"
      width="30%"
    >
      <span
        >暂停回收期间，问卷链接关闭，问卷不回收数据。确定要暂停回收问卷《{{
          formOptions.name.trim()
        }}》吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="pauseRecyclingDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="pauseRecyclingForm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="删除问卷
"
      :visible.sync="deleteFormVisible"
      width="30%"
    >
      <span>确定删除问卷吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllFormOptions, updateFormOptions, deleteFormOptions } from '@/api/form'
import { theme } from '@/util/date'
import { getFormData } from "../../api/form";
export default {
  name: 'page2',
  async created() {
    const { data } = await getAllFormOptions()
    console.log(data)
    this.formOptionsData = data.data
    for (let index in this.formOptionsData) {
      //结束时间判断
      if (new Date(this.formOptionsData[index].endTime) < new Date()) {
        this.formOptionsData[index].play = false
      }
      //录入统计信息
      const statis = await getFormData(this.formOptionsData[index].fid)
      let obj = this.formOptionsData[index]
      obj.statis = statis.data.data
      this.$set(this.formOptionsData, index, obj)
      console.log('单个obj', this.formOptionsData[index])
    }
    this.getOptions()
  },
  computed: {
    theme() {
      return theme()
    }
  },
  data() {
    // 校验网址
    var validateURL = (rule, value, callback) => {

      if (this.formOptions.goToURL !== '') {
        var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
        if (!reg.test(this.formOptions.goToURL)) {
          callback(new Error('请输入正确的URL'))
        }
      }
      callback();
    };
    return {
      //获取链接URL
      getLinkURL(fid) {
        return process.env.VUE_APP_FORM_URL + fid
      },
      isHover: [],
      isStart: [],
      drawerVisible: false,
      startRecyclingDialogVisible: false,
      pauseRecyclingDialogVisible: false,
      // 所有表单配置数据 用于渲染的
      formOptionsData: {},
      // 当前表单的信息
      currentForm: {},
      Options: {},
      formOptions: {
        bgURL: '',
        startTime: new Date(),
        endTime: new Date((new Date()).getTime() + 24 * 60 * 60 * 1000),
        fillOne: false,
        goToURL: '',
        name: '',
        play: true,
        pswd: '',
        randomEcho: false,
        fid: null
      },
      rules: {
        goToURL: [
          { validator: validateURL, trigger: 'blur' }
        ]
      },
      deleteFormVisible: false

    }
  },
  methods: {
    // 开始回收问卷dialog
    startRecycling(index, item) {
      this.$set(this.isStart, index, true)
      this.startRecyclingDialogVisible = true
      this.currentForm = item
    },
    // 开始回收
    async startRecyclingForm() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      console.log(this.currentForm);
      this.currentForm.play = true
      const { data } = await updateFormOptions(this.currentForm)
      console.log(data)
      this.startRecyclingDialogVisible = false
      loading.close();
    },
    // 暂停回收问卷dialog
    pauseRecycling(index, item) {
      this.$set(this.isStart, index, false)
      this.pauseRecyclingDialogVisible = true
      this.currentForm = item
    },
    // 暂停回收问卷
    async pauseRecyclingForm() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      console.log(this.currentForm)
      this.currentForm.play = false
      const { data } = await updateFormOptions(this.currentForm)
      console.log(data)
      this.pauseRecyclingDialogVisible = false
      loading.close();

    },
    // 修改所有配置
    async updateAllFormOptions() {
      const loading = this.$loading({
        lock: true,
        text: '修改中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.formOptions.startTime = new Date(this.formOptions.startTime).getTime();
      this.formOptions.endTime = new Date(this.formOptions.endTime).getTime();
      const { data } = await updateFormOptions(this.formOptions)
      console.log(data)
      loading.close();
      this.$message.success('修改成功')
    },
    // hover enter
    enter(index) {
      this.$set(this.isHover, index, true);
    },
    leave(index) {
      this.$set(this.isHover, index, false);
    },
    // 关于抽屉的显示与隐藏
    showDrawer(item) {
      this.drawerVisible = true
      this.currentForm = item
      this.formOptions = this.currentForm
      console.log(this.currentForm);
    },
    // 编辑
    editForm(fid) {
      this.$router.push(`/designForm?fid=${ fid }`)
    },
    // 跳转数据分析页面
    openDataAnalysis(fid) {
      localStorage.setItem('title', this.formOptions.name)
      this.$router.push({ path: '/dataananlysis', query: { id: fid } })
    },
    // 获取图标配置项
    getOptions() {
      this.Options = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          data: [820, 932, 901, 934, 129],
          type: 'line',
          smooth: true
        }],
        tooltip: {
          trigger: 'axis',
          formatter: (v) => {
            return `${ v[0].name }</br>回收量:${ v[0].data }`
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#fff'
          }
        }
      }

    },
    // 投放问卷跳转
    putFormJump(id) {
      this.$router.push({ path: '/putform', query: { id } })
    },
    //  删除问卷dialog
    deleteFormHandle(fid) {
      this.deleteFormVisible = true
    },
    async deleteForm() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const { data } = await deleteFormOptions(this.currentForm.fid)

      this.deleteFormVisible = false
      loading.close()
      this.$message.success('删除成功')
      this.formOptionsData.forEach((item, index) => {
        if (item.fid === this.currentForm.fid) {
          this.formOptionsData.splice(index, 1)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  line-height: 32px;
  text-align: left;
  font-weight: 900;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2%;
}

.image {
  width: 100%;
  height: 70%;
  cursor: pointer;
}
.recycing2 {
  position: absolute;
  left: 5px;
  top: 5px;
  color: red;
  border: 1px solid red;
  background-color: #f4fdf7;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 6px;
}
.recycing {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #1ed261;
  border: 1px solid #1ed261;
  background-color: #f4fdf7;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 6px;
}
.form-title {
  color: #aaaaaa;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.form-button {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-icon-video-pause {
    cursor: pointer;
    &:hover {
      color: blue;
    }
  }
  .el-icon-video-play {
    cursor: pointer;
    &:hover {
      color: blue;
    }
  }
  .el-icon-edit {
    cursor: pointer;
    &:hover {
      color: blue;
    }
  }
  .el-icon-pie-chart {
    cursor: pointer;
    &:hover {
      color: blue;
    }
  }
}
.drawer {
  .title {
    padding: 20px 30px 20px 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
  }
  .totalCharts-container {
    color: #2378ff;
    border-radius: 3px;
    background-color: #f6f8fa;
    -webkit-box-shadow: 0 0 0 1px #e1e7f2;
    box-shadow: 0 0 0 1px #e1e7f2;
    margin-right: 30px;
    margin-left: 30px;
    .total-container {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .total-title {
        padding: 0 10px;
        line-height: 40px;
      }
    }
    .total-chart {
      height: 250px;
      width: 400px;
      .echarts {
        width: 250px;
        height: 250px;
      }
    }
  }
  .form-info {
    display: flex;
    flex-direction: column;
    margin: 20px 30px 5px 30px;
    .form-info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .item-key {
        color: #a9a9a9;
      }
    }
  }
  .devide {
    margin: 0 30px;
    border-top: 1px solid #ccc;
  }
  .link {
    margin: 0 30px 20px 30px;
    display: block;
    line-height: 36px;
    color: #2378ff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .btn-container {
    margin: 0 30px 20px 30px;
  }
}
</style>
